<!-- src/components/home/CategoryTabs.vue -->
<template>
	<!-- 
    flex-shrink-0: 防止被压缩 与flex-1冲突
    overflow-x-auto: 横向滚动
    scrollbar-hide: 隐藏滚动条（需要一个 Tailwind 插件或自定义 CSS）
		- flex-1: 让该组件在 flex 容器中占据可用空间。
    - min-w-0: 关键修复！允许组件宽度收缩至0，这样内部的 overflow-x-auto 才能正确计算和生效。
    - 移除了与 flex-1 冲突的 flex-shrink-0。
  -->
	<div
		v-horizontal-wheel-scroll
		class="flex-1 min-w-0 overflow-x-auto scrollbar-hide "
	>
		<div class="flex space-x-4 md:space-x-8 whitespace-nowrap">
		<button
			v-for="item in categoryStore.list"
			@click="selectCategory(item.id)"
			:key="item.id"
			:ref="el => setButtonRef(item.id, el)"
			:class="{
				// --- 基础样式 (始终应用) ---
				'transition-all duration-200 font-medium': true,
				// 移动端: 下划线样式 (默认) ---
				'bg-transparent px-0 py-2 rounded-none text-sm': true,
				//  PC端: 背景填充的胶囊样式 ---
				'md:px-4 md:py-2 md:rounded-lg md:text-base': true,
				// --- 激活状态的样式 ---
				'text-black font-bold border-b-2 border-black': modelValue === item.id, // 移动端-亮色
				'dark:text-white dark:border-white': modelValue === item.id, // 移动端-暗色
				'md:bg-black md:text-white': modelValue === item.id, // PC端-亮色
				'md:dark:bg-white md:dark:text-black': modelValue === item.id, // PC端-暗色
				// --- 非激活状态的样式 ---
				'text-gray-700 border-b-2 border-transparent': modelValue !== item.id, // 移动端-亮色
				'dark:text-gray-300': modelValue !== item.id, // 移动端-暗色
				'md:bg-gray-100 md:text-gray-700': modelValue !== item.id, // PC端-亮色
				'md:dark:bg-gray-800 md:dark:text-gray-300': modelValue !== item.id, // PC端-暗色
				}"
			>
				{{ item.name }}
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useCategoryStore } from "@/store/modules/category";

const categoryStore = useCategoryStore();
const props = defineProps<{
	modelValue: string;
}>();

const emit = defineEmits<{
	(e: "update:modelValue", id: string): void;
}>();
const buttonRefs = ref<Map<string, HTMLElement>>(new Map());
const setButtonRef = (id: string, el: any) => {
	if (el) {
		buttonRefs.value.set(id, el);
	}
};

// 当外部的 activeId 变化时，滚动到视图
watch(
	() => props.modelValue,
	newId => {
		if (newId) {
			scrollToActive(newId);
		}
	}
);

const scrollToActive = (id: string) => {
	const button = buttonRefs.value.get(id);
	if (button) {
		button.scrollIntoView({
			behavior: "smooth",
			block: "nearest",
			inline: "center",
		});
	}
};

const selectCategory = (id: string) => {
	emit("update:modelValue", id);
};

defineExpose({
	scrollToActive,
});
</script>

<style>
/* 一个简单的隐藏滚动条的 CSS 工具类 */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}
.scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

</style>
